<template>
  <view class="purse-container">
    <!-- 顶部导航栏 -->
    <view class="nav-header">
      <view class="nav-back" @tap="goBack">
        <u-icon name="arrow-left" size="20" color="#333"></u-icon>
      </view>
      <view class="nav-title">我的钱包</view>
      <view class="nav-right"></view>
    </view>
    
    <!-- 顶部余额卡片 -->
    <view class="balance-card">
      <!-- 充值按钮 -->
      <view class="recharge-btn-top" @tap="showRechargePopup">
        <text class="recharge-text">充值</text>
      </view>
      
      <view class="balance-title">
        <text>今日收益</text>
      </view>
      <view class="balance-amount">
        <text class="amount-num">0</text>
      </view>
      <view class="balance-actions">
        <view class="balance-info">
          <view class="info-item">
            <text class="info-label">余额</text>
            <text class="info-value">{{userBalance}}</text>
            
          </view>
          <view class="info-item">
            <text class="info-label">已获收益</text>
            <text class="info-value">0</text>
            
          </view>
        </view>
      </view>
    </view>

    <!-- 功能按钮区 -->
    <view class="function-btns">
      <view class="function-item" @tap="onShare">
        <view class="function-icon">
          <u-icon name="share-square" size="30" color="#4CAF50"></u-icon>
        </view>
        <text class="function-text">推广分享</text>
      </view>
      <view class="function-item" @tap="onRechargeRecord">
        <view class="function-icon">
          <u-icon name="rmb-circle" size="30" color="#4CAF50"></u-icon>
        </view>
        <text class="function-text">充值明细</text>
      </view>
    </view>

    <!-- 菜单列表 -->
    <view class="menu-list">
      <view class="menu-item" @tap="onFundFlow">
        <view class="menu-icon">
          <u-icon name="file-text" size="20" color="#333"></u-icon>
        </view>
        <view class="menu-title">资金流水</view>
        <view class="menu-arrow">
          <u-icon name="arrow-right" size="16" color="#999"></u-icon>
        </view>
      </view>
      <view class="menu-item" @tap="onConsumptionRecord">
        <view class="menu-icon">
          <u-icon name="red-packet" size="20" color="#333"></u-icon>
        </view>
        <view class="menu-title">消费记录</view>
        <view class="menu-arrow">
          <u-icon name="arrow-right" size="16" color="#999"></u-icon>
        </view>
      </view>
      <view class="menu-item" @tap="onPaymentCertificate">
        <view class="menu-icon">
          <u-icon name="grid" size="20" color="#333"></u-icon>
        </view>
        <view class="menu-title">汇款凭证</view>
        <view class="menu-arrow">
          <u-icon name="arrow-right" size="16" color="#999"></u-icon>
        </view>
      </view>
    </view>
    
    <!-- 充值弹窗 -->
    <u-popup :show="showRecharge" @close="showRecharge = false" mode="center" border-radius="14" width="80%">
      <view class="recharge-popup">
        <view class="recharge-title">账户充值</view>
        <view class="recharge-form">
          <view class="recharge-label">充值金额</view>
          <view class="recharge-input-container">
            <text class="recharge-symbol">¥</text>
            <input class="recharge-input" type="digit" v-model="rechargeAmount" placeholder="请输入充值金额"
              @input="validateRechargeInput" />
          </view>
          <view class="recharge-options">
            <view class="recharge-option" :class="{'option-selected': rechargeAmount === '50'}"
              @tap="selectAmount('50')">
              <text>¥50</text>
            </view>
            <view class="recharge-option" :class="{'option-selected': rechargeAmount === '100'}"
              @tap="selectAmount('100')">
              <text>¥100</text>
            </view>
            <view class="recharge-option" :class="{'option-selected': rechargeAmount === '200'}"
              @tap="selectAmount('200')">
              <text>¥200</text>
            </view>
            <view class="recharge-option" :class="{'option-selected': rechargeAmount === '500'}"
              @tap="selectAmount('500')">
              <text>¥500</text>
            </view>
          </view>
          <view class="recharge-tip">充值金额不支持退款，请谨慎操作</view>
          <view class="recharge-actions">
            <button class="recharge-btn recharge-cancel" @tap="showRecharge = false">取消</button>
            <button class="recharge-btn recharge-confirm" @tap="doRecharge">确认充值</button>
          </view>
        </view>
      </view>
    </u-popup>

    <!-- 充值结果弹窗 -->
    <u-popup :show="showRechargeResult" @close="showRechargeResult = false" mode="center" border-radius="14" width="70%" >
      <view class="result-popup" :class="{'success-popup': rechargeSuccess}">
        <view class="result-icon">
          <u-icon :name="rechargeSuccess ? 'checkmark-circle' : 'close-circle'"
            :color="rechargeSuccess ? '#4CD964' : '#FA3534'" size="60"></u-icon>
        </view>
        <view class="result-title" :class="{'success-title': rechargeSuccess}">
          {{rechargeSuccess ? '充值成功' : '充值失败'}}</view>
        <view class="result-message">{{rechargeResultMsg}}</view>
        <view class="result-actions">
          <button class="action-btn" @tap="closeResultPopup">确定</button>
        </view>
      </view>
    </u-popup>
    
    <!-- 仅在微信小程序中使用 -->
    <web-view v-if="showWebView && paymentUrl" :src="paymentUrl" @message="handleWebViewMessage" @load="handleWebViewLoad" @error="handleWebViewError"></web-view>
  </view>
</template>

<script>
// 导入所需组件和工具
import uIcon from "uview-ui/components/u-icon/u-icon.vue"
import uPopup from "uview-ui/components/u-popup/u-popup.vue"
import request from '@/util/request.js'

export default {
  components: {
    uIcon,
    uPopup
  },
  data() {
    return {
      userInfo: {
        userId: '',
        userAcc: '',
        userName: ''
      },
      userBalance: '0.00',
      userIntegral: '0',
      balance: 0,
      income: 0,
      showRecharge: false,
      rechargeAmount: '',
      showRechargeResult: false,
      rechargeSuccess: false,
      rechargeResultMsg: '',
      token: '',
      recharging: false,
      // web-view相关
      showWebView: false,
      paymentUrl: '',
      currentOrderNo: '',
      returnUrl: '', // 新增：支付完成后的返回地址
    }
  },
  onLoad() {
    // 设置状态栏样式
    wx.setNavigationBarColor({
      frontColor: '#000000',
      backgroundColor: '#ffffff'
    });
    
    this.getUserInfo();
    this.token = wx.getStorageSync('token') || '';
    this.getUserBalance();
  },
  onShow() {
    this.token = wx.getStorageSync('token') || '';
    this.getUserInfo();
    
  },
  methods: {
    goBack() {
      wx.navigateBack();
    },
    // 获取用户信息
    getUserInfo() {
      try {
        const userInfo = wx.getStorageSync('userInfo');
        if (userInfo) {
          this.userInfo.userId = userInfo.userId;
          this.userInfo.userAcc = userInfo.userAcc;
          this.userInfo.userName = userInfo.userName;
        } else {
          // 未登录处理
          wx.navigateTo({
            url: '/pages/login/login'
          });
        }
      } catch (e) {
        console.error('获取用户信息失败', e);
      }
    },
    
    // 获取用户余额
    async getUserBalance() {
      try {
        const res = await request({
          url: '/user-service/user/balance',
          method: 'GET',
          data: {
            userId: this.userInfo.userId
          }
        });

        // 获取余额成功
        const balance = res.data.balance || 0;
        this.userBalance = balance.toFixed(2);
        const integral = res.data.integral || 0;
        this.userIntegral = integral;
      } catch (error) {
        console.error('获取余额失败', error);
        if (error.code === 401) {
          // token失效，跳转登录页
          wx.navigateTo({
            url: '/pages/login/login'
          });
        }
      }
    },
    
    // 获取积分
    async getUserIntegral(){
      try {
        const res = await request({
          url: '/user-service/user/integral',
          method: 'GET',
          data: {
            userId: this.userInfo.userId
          }
        });
      
        // 获取积分
        const integral = res.data.integral || 0;
        this.userIntegral = integral;
      } catch (error) {
        console.error('获取积分失败', error);
        if (error.code === 401) {
          // token失效，跳转登录页
          wx.navigateTo({
            url: '/pages/login/login'
          });
        }
      }
    },
    
    // 显示充值弹窗
    showRechargePopup() {
      if (!this.userInfo.userId) {
        wx.showToast({
          title: '请先登录',
          icon: 'none'
        });
        return;
      }
      this.rechargeAmount = '';
      this.showRecharge = true;
    },

    // 选择金额
    selectAmount(amount) {
      this.rechargeAmount = amount;
    },

    // 验证充值输入，只允许正整数
    validateRechargeInput(e) {
      // 获取当前输入值
      let value = e.detail.value;
      
      // 去除非数字字符
      value = value.replace(/[^\d]/g, '');

      // 确保没有小数点
      if (value.indexOf('.') !== -1) {
        value = value.split('.')[0];
      }

      // 去除前导零
      if (value.length > 1 && value.charAt(0) === '0') {
        value = value.substring(1);
      }

      // 更新值
      this.rechargeAmount = value;
    },

   // 执行充值
   async doRecharge() {
     if (!/^[1-9]\d*$/.test(this.rechargeAmount)) {
       wx.showToast({
         title: '请输入正整数充值金额',
         icon: 'none'
       });
       return;
     }
   
     if (this.recharging) return; // 防止重复提交
     this.recharging = true;
   
     wx.showLoading({
       title: '创建订单中...'
     });
   
     try {
       // 生成支付完成后的返回地址（当前页面路径）
       const pages = getCurrentPages();
       const currentPage = pages[pages.length - 1];
       const returnUrl = 'pages' + currentPage.route.split('pages')[1]; // 获取当前页面路径
       this.returnUrl = returnUrl;
       
       // 调用后端接口创建支付订单
       const res = await request({
         url: '/alipay-service/alipay/pay',
         method: 'POST',
         header: {
           'content-type': 'application/json'
         },
         data: {
           userId: this.userInfo.userId,
           amount: Number(this.rechargeAmount) * 100, // 转换为分
           subject: '充值余额',
           platform: 'wx-miniprogram',
           returnUrl: returnUrl ,// 传递返回URL到后端
		   payType: 'h5' // 明确指定H5支付
         }
       });
   
       wx.hideLoading();
       
       if (res.code === 200 && res.data) {
         // 关闭充值弹窗
         this.showRecharge = false;
         
         // 从响应中获取订单号和支付链接
         const orderData = res.data;
         const orderNo = orderData.orderNo || '';
         this.currentOrderNo = orderNo;
         
         // 获取支付链接
         const paymentUrl = orderData.paymentUrl;
         console.log('支付返回数据:', orderData);
         
         if (!orderNo) {
           this.rechargeSuccess = false;
           this.rechargeResultMsg = '创建订单失败，未获取到订单号';
           this.showRechargeResult = true;
           return;
         }
         
         if (paymentUrl) {
           // 使用web-view打开支付链接
           this.openAlipayPayment(paymentUrl);
         } else {
           this.rechargeSuccess = false;
           this.rechargeResultMsg = '获取支付链接失败，请稍后再试';
           this.showRechargeResult = true;
         }
       } else {
         // 充值失败处理
         this.rechargeSuccess = false;
         this.rechargeResultMsg = res.message || '充值失败，请稍后再试';
         this.showRecharge = false;
         this.showRechargeResult = true;
       }
     } catch (err) {
       wx.hideLoading();
       console.error('充值请求失败:', err);
       // 请求失败处理
       this.rechargeSuccess = false;
       this.rechargeResultMsg = err.message || '充值失败，请稍后再试';
       this.showRecharge = false;
       this.showRechargeResult = true;
     } finally {
       this.recharging = false;
     }
   },

    // 关闭结果弹窗
    closeResultPopup() {
      this.showRechargeResult = false;
      if (this.rechargeSuccess) {
        // 刷新余额
        this.getUserBalance();
      }
    },
    
    onRecharge() {
      this.showRechargePopup();
    },
    
    onShare() {
      // 推广分享功能
      wx.showToast({
        title: '分享功能开发中',
        icon: 'none'
      })
    },
    onRechargeRecord() {
      // 充值明细功能
      if (!this.userInfo.userId) {
        wx.showToast({
          title: '请先登录',
          icon: 'none'
        });
        return;
      }
      
      // 跳转到充值记录页面
      wx.navigateTo({
        url: '/pages/my/rechargeRecord'
      });
    },
    
    // 显示充值记录
    showRechargeRecords(records) {
      // 这里可以实现一个新的弹窗来展示充值记录
      // 简单起见，这里先用wx.showModal展示最近的一条记录
      if (records && records.length > 0) {
        const latestRecord = records[0];
        let status = '未知状态';
        
        // 转换支付状态为可读文本
        switch (latestRecord.alipayStatus) {
          case 0:
            status = '待支付';
            break;
          case 1:
            status = '支付成功';
            break;
          case 2:
            status = '已退款';
            break;
          case 3:
            status = '已关闭';
            break;
          default:
            status = '未知状态';
        }
        
        wx.showModal({
          title: '最近充值记录',
          content: `订单号: ${latestRecord.alipayTraceNum}\n金额: ¥${latestRecord.alipayTotalAmount}\n状态: ${status}\n时间: ${latestRecord.createTime || '未知'}`,
          showCancel: false
        });
      }
    },
    
    onFundFlow() {
      // 资金流水功能
      if (!this.userInfo.userId) {
        wx.showToast({
          title: '请先登录',
          icon: 'none'
        });
        return;
      }
      
      // 跳转到资金流水页面
      wx.navigateTo({
        url: '/pages/my/fundFlow'
      });
    },
    onConsumptionRecord() {
      // 消费记录功能
      if (!this.userInfo.userId) {
        wx.showToast({
          title: '请先登录',
          icon: 'none'
        });
        return;
      }
      
      // 跳转到消费记录页面
      wx.navigateTo({
        url: '/pages/my/consumptionRecord'
      });
    },
    onPaymentCertificate() {
      // 汇款凭证功能
      wx.showToast({
        title: '汇款凭证功能开发中',
        icon: 'none',
        duration: 2000
      })
    },
    
    // 查询订单状态
    checkOrderStatus(orderNo) {
      if (!orderNo) return;
      
      // 显示加载提示
      wx.showLoading({
        title: '查询支付状态...'
      });
      
      // 设置查询间隔和最大查询次数
      let queryCount = 0;
      const maxQueryCount = 5; // 最多查询5次
      const queryInterval = 2000; // 每2秒查询一次
      
      const queryOrderStatus = () => {
        request({
          url: '/alipay-service/alipay/status/' + orderNo,
          method: 'GET',
          data: {
            userId: this.userInfo.userId
          }
        }).then(res => {
          console.log('订单查询响应:', res);
          
          if (res.code === 200) {
            // 检查订单状态
            const order = res.data;
            
            // 如果订单不存在，停止查询
            if (!order) {
              wx.hideLoading();
              wx.showToast({
                title: '订单不存在',
                icon: 'none'
              });
              return;
            }
            
            // 检查订单支付状态
            if (order.status === 'TRADE_SUCCESS' || order.status === 'TRADE_FINISHED') {
              // 支付成功
              wx.hideLoading();
              this.rechargeSuccess = true;
              this.rechargeResultMsg = `支付成功，余额已更新`;
              this.showRechargeResult = true;
              
              // 刷新余额
              this.getUserBalance();
              // 清除当前订单号
              this.currentOrderNo = '';
              return;
            } else if (order.status === 'TRADE_CLOSED') {
              // 交易关闭
              wx.hideLoading();
              this.rechargeSuccess = false;
              this.rechargeResultMsg = '订单已关闭或已退款';
              this.showRechargeResult = true;
              // 清除当前订单号
              this.currentOrderNo = '';
              return;
            } else if (order.status === 'WAIT_BUYER_PAY') {
              // 等待支付，继续查询
              if (queryCount >= maxQueryCount) {
                // 超过最大查询次数，但用户可能正在支付中
                wx.hideLoading();
                wx.showToast({
                  title: '订单待支付，请稍后查看',
                  icon: 'none'
                });
                return;
              }
            }
          }
          
          // 继续查询
          queryCount++;
          if (queryCount < maxQueryCount) {
            setTimeout(queryOrderStatus, queryInterval);
          } else {
            // 超过最大查询次数
            wx.hideLoading();
            wx.showToast({
              title: '请在"充值明细"查看状态',
              icon: 'none',
              duration: 2000
            });
          }
        }).catch(err => {
          console.error('查询订单状态失败', err);
          wx.hideLoading();
          
          // 网络错误或其他错误
          wx.showToast({
            title: '查询失败，请稍后再试',
            icon: 'none'
          });
        });
      };
      
      // 开始查询
      queryOrderStatus();
    },
    
    // web-view相关处理方法
    handleWebViewMessage(event) {
      console.log('web-view消息', event);
      // 处理web-view发送的消息，如支付完成事件
      if (event.detail && event.detail.data) {
        const data = event.detail.data;
        // 判断支付是否成功
        if (data.status === 'success' || data.status === 'TRADE_SUCCESS' || data.status === 'TRADE_FINISHED') {
          // 支付成功
          this.showWebView = false;
          this.paymentUrl = '';
          this.rechargeSuccess = true;
          this.rechargeResultMsg = '支付成功，余额已更新';
          this.showRechargeResult = true;
          // 刷新余额
          this.getUserBalance();
        } else if (data.status === 'fail' || data.status === 'TRADE_CLOSED') {
          // 支付失败
          this.showWebView = false;
          this.paymentUrl = '';
          this.rechargeSuccess = false;
          this.rechargeResultMsg = '支付失败，请稍后再试';
          this.showRechargeResult = true;
        } else if (data.action === 'redirect') {
          // 处理重定向消息
          this.showWebView = false;
          this.paymentUrl = '';
          // 检查订单状态
          if (this.currentOrderNo) {
            this.checkOrderStatus(this.currentOrderNo);
          }
        }
      }
    },
    
    handleWebViewLoad(event) {
      console.log('web-view加载完成', event);
      // 隐藏加载提示
      wx.hideLoading();
    },
    
    handleWebViewError(event) {
      console.error('web-view加载错误', event);
      this.showWebView = false;
      wx.showToast({
        title: '支付页面加载失败',
        icon: 'none'
      });
    },
    
    // 关闭web-view
    closeWebView() {
      this.showWebView = false;
      this.paymentUrl = '';
      
      // 如果有未完成的支付，查询一下状态
      // if (this.currentOrderNo) {
      //   this.checkOrderStatus(this.currentOrderNo);
      // }
    },

    // 打开支付宝支付
    openAlipayPayment(paymentUrl) {
      // 首先尝试使用web-view加载支付链接
      try {
        wx.showLoading({
          title: '加载支付页面...'
        });
        
        // 检查传入的链接是否有效
        if (!paymentUrl || typeof paymentUrl !== 'string') {
          throw new Error('无效的支付链接');
        }
        
        // 处理支付链接，添加返回参数
        let finalPaymentUrl = paymentUrl;
		console.log(finalPaymentUrl,"-----745返回参数")
        
        // 确保链接中包含必要的返回参数
        if (paymentUrl.indexOf('return_url=') === -1) {
          // 构建重定向链接，需要后端配合实现
          // 后端需要提供一个中转HTML页面，该页面会使用JS将消息发送回小程序
          const separator = paymentUrl.indexOf('?') !== -1 ? '&' : '?';
          
          // 使用应用内的静态HTML页面作为返回地址
          // 注意：这里需要替换为您的实际域名，该域名应当已在微信小程序后台添加到业务域名中
          const redirectUrl = encodeURIComponent('https://localhost:50000/static/html/h5-redirect.html');
          finalPaymentUrl = `${paymentUrl}${separator}return_url=${redirectUrl}`;
		  console.log(finalPaymentUrl,"-----757最后的结果")
        }
        
        // 使用web-view显示支付链接
        this.paymentUrl = finalPaymentUrl;
        this.showWebView = true;
        
        // 保存订单号，用于后续查询
        if (this.currentOrderNo) {
          wx.setStorageSync('pendingPayOrderNo', this.currentOrderNo);
        }
      } catch (error) {
        wx.hideLoading();
        console.error('打开支付页面失败:', error);
        
        // 如果web-view失败，提供备选方案：尝试跳转到支付宝小程序
        wx.navigateToMiniProgram({
          appId: '9021000143685601', // 支付宝小程序的appId，需要替换为您的真实appId
          path: 'pages/index/index?url=' + encodeURIComponent(paymentUrl),
          extraData: {
            from: 'wxMiniProgram'
          },
          envVersion: 'release', // 正式版为'release'，体验版为'trial'，开发版为'develop'
          success: (res) => {
            console.log('跳转支付宝小程序成功', res);
            // 保存订单号，用于后续查询
            if (this.currentOrderNo) {
              wx.setStorageSync('pendingPayOrderNo', this.currentOrderNo);
            }
          },
          fail: (err) => {
            console.error('跳转支付宝小程序失败', err);
            
            // 如果跳转失败，提供复制链接的选项
            wx.showModal({
              title: '跳转失败',
              content: '无法打开支付页面，您可以复制支付链接到浏览器中打开完成支付',
              confirmText: '复制链接',
              success: (res) => {
                if (res.confirm) {
                  wx.setClipboardData({
                    data: paymentUrl,
                    success: () => {
                      wx.showToast({
                        title: '链接已复制',
                        icon: 'success'
                      });
                      
                      // 保存订单号，用于后续查询
                      if (this.currentOrderNo) {
                        wx.setStorageSync('pendingPayOrderNo', this.currentOrderNo);
                      }
                    }
                  });
                }
              }
            });
          }
        });
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.purse-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.nav-header {
  display: flex;
  align-items: center;
  height: 90rpx;
  background-color: #ffffff;
  padding: 0 30rpx;
  
  .nav-back {
    width: 60rpx;
    display: flex;
    align-items: center;
  }
  
  .nav-title {
    flex: 1;
    text-align: center;
    font-size: 32rpx;
    font-weight: 500;
    color: #333;
  }
  
  .nav-right {
    width: 60rpx;
  }
}

.balance-card {
  background-color: #4CAF50;
  color: #ffffff;
  padding: 30rpx;
  position: relative;
  
  .recharge-btn-top {
    position: absolute;
    right: 30rpx;
    top: 200rpx;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 30rpx;
    padding: 8rpx 30rpx;
    
    .recharge-text {
      font-size: 35rpx;
      color: #ffffff;
      font-weight: 500;
    }
  }
  
  .balance-title {
    font-size: 28rpx;
    margin-bottom: 10rpx;
  }
  
  .balance-amount {
    margin-bottom: 30rpx;
    
    .amount-num {
      font-size: 60rpx;
      font-weight: bold;
    }
  }
  
  .balance-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .balance-info {
      display: flex;
      
      .info-item {
        margin-right: 40rpx;
        display: flex;
        flex-direction: column;
        
        .info-value {
          font-size: 35rpx;
          margin-top: 12rpx;
          font-weight: bold;
        }
        
        .info-label {
          font-size: 30rpx;
          
          margin-right: 200rpx;
          opacity: 1.2;
        }
      }
    }
    
    .recharge-btn {
      margin-left: auto;
      background-color: rgba(255, 255, 255, 0.2);
      border-radius: 30rpx;
      padding: 6rpx 20rpx;
      
      .recharge-text {
        font-size: 24rpx;
        color: #ffffff;
      }
    }
  }
}

.function-btns {
  display: flex;
  background-color: #ffffff;
  padding: 30rpx 0;
  margin-bottom: 20rpx;
  
  .function-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    .function-icon {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .function-text {
      font-size: 24rpx;
      color: #333;
      margin-top: 10rpx;
    }
  }
}

.menu-list {
  background-color: #ffffff;
  
  .menu-item {
    display: flex;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1px solid #f5f5f5;
    
    .menu-icon {
      margin-right: 20rpx;
    }
    
    .menu-title {
      flex: 1;
      font-size: 28rpx;
      color: #333;
    }
    
    .menu-arrow {
      color: #999;
    }
  }
}

/* 充值弹窗样式 */
.recharge-popup {
  background-color: #ffffff;
  padding: 30rpx;
}

.recharge-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 30rpx;
}

.recharge-form {
  padding: 0 10rpx;
}

.recharge-label {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 20rpx;
}

.recharge-input-container {
  display: flex;
  align-items: center;
  border-bottom: 2rpx solid #e0e0e0;
  margin-bottom: 30rpx;
}

.recharge-symbol {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-right: 10rpx;
}

.recharge-input {
  flex: 1;
  height: 80rpx;
  font-size: 32rpx;
}

.recharge-options {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 30rpx;
}

.recharge-option {
  width: 25%;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2rpx solid #e0e0e0;
  border-radius: 8rpx;
  box-sizing: border-box;
  margin-bottom: 20rpx;
  margin-right: 8%;
}

.recharge-option:nth-child(3n) {
  margin-right: 0;
}

.recharge-option text {
  font-size: 28rpx;
  color: #333;
}

.option-selected {
  border-color: #4CAF50;
  background-color: #E8F5E9;
}

.option-selected text {
  color: #4CAF50;
}

.recharge-tip {
  font-size: 24rpx;
  color: #999;
  text-align: center;
  margin-bottom: 30rpx;
}

.recharge-actions {
  display: flex;
  justify-content: space-between;
}

.recharge-btn {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  font-size: 28rpx;
  border-radius: 40rpx;
  margin: 0 10rpx;
}

.recharge-cancel {
  background-color: #F5F5F5;
  color: #666;
}

.recharge-confirm {
  background-color: #4CAF50;
  color: #FFFFFF;
}

/* 充值结果弹窗样式 */
.result-popup {
  padding: 40rpx 30rpx;
  text-align: center;
}

.success-popup {
  background-color: #F8FFF8;
  border-top: 8rpx solid #4CD964;
}

.result-icon {
  margin-bottom: 30rpx;
}

.result-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.success-title {
  color: #4CD964;
}

.result-message {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 40rpx;
  line-height: 1.5;
}

.result-actions {
  display: flex;
  justify-content: center;
}

.action-btn {
  width: 80%;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
  background-color: #4CAF50;
  color: #FFFFFF;
}
</style>
